﻿@page "/components/typography"
@page "/components/MudText"

<DocsPage>
    <DocsPageHeader Title="Typography" Component="@nameof(MudText)" SubTitle="Use MudText to present your design and content as clearly and efficiently as possible." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="General">
                <Description>
                    <p>
                        MudBlazor's default font is Roboto which is not loaded automatically.
                        The installation instructions include how to load the font, but generally the easiest way is to load it from Google Fonts, as in the example below.
                    </p>
                    <br />
                    <p>
                        The type of element that's created depends on the typo used and can be overridden with the <CodeInline>@nameof(MudText.HtmlTag)</CodeInline> property.
                        Use Inspect to compare how the text below is rendered.
                    </p>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TextGeneralExample)" Block="true">
                <TextGeneralExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Alignment">
                <Description>
                    This demonstrates the <CodeInline>@nameof(MudText.Align)</CodeInline> property.
                    <br />
                    <b>Note:</b> This will not work with an inline element like <CodeInline>span</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TextAlignmentExample)" Block="true" FullWidth="true">
                <TextAlignmentExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Inline">
                <Description>
                    This demonstrates the <CodeInline>@nameof(MudText.Inline)</CodeInline> property.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TextInlineExample)" Block="true" FullWidth="true">
                <TextInlineExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>